<template>
	<view>
		<navbar title="库存查询" :isbg="false" :autoBack="true" :opacity='1'></navbar>
		<u-line color="#FCFCFD"></u-line>
		<view class="con">
			<view class="u-flex u-flex-y-center u-flex-between">
				<view class="tab" v-for="(item,index) in listtab" :key="index" @click="clicktab(index)">
					{{item.name}}
					<u-icon name="arrow-down-fill" size="20rpx"></u-icon>
				</view>
				<u-button text="查询" color="#2A51FA" @click="getlist" :customStyle="{
					height:'57rpx',
					width:'108rpx',
					margin:0,
					fontSize:'28rpx'
				}"></u-button>
			</view>
			<view class="box">
				<t-table border-color='#E8E9EB' style="margin-top: 24rpx;">
					<t-tr>
						<t-th>商品名称</t-th>
						<t-th>规格尺寸</t-th>
						<t-th>库存数量</t-th>
						<t-th>单位</t-th>
					</t-tr>
					<scroll-view scroll-y="true" class="table__body">
						<t-tr v-for="item in list" :key="item.id">
							<t-td>{{ item.name }}</t-td>
							<t-td>{{ item.size }}</t-td>
							<t-td>共{{item.num}}.{{ item.canku.name }}【{{item.num}}】</t-td>
							<t-td>{{ item.flag }}</t-td>
						</t-tr>
					</scroll-view>
				</t-table>

				<!-- <view class="table">
					<view class="table__head">
						<view class="table__item item br bb" style="width: 176rpx;">
							商品名称
						</view>
						<view class="table__item item br bb" style="width: 96rpx;">
							规格尺寸
						</view>
						<view class="table__item item br bb" style="width: 206rpx;">
							库存数量
						</view>
						<view class="table__item item br bb" style="width: 66rpx;">
							单位
						</view>
					</view>
					<scroll-view scroll-y="true" class="table__body">
						<view class="u-flex u-flex-y-center bb bl" v-for="(item,index) in list" :key="index">
							<view class="table__item" style="width: 176rpx;">
								{{item.name}}
							</view>
							<view class="table__item" style="width: 96rpx;">
								{{item.size}}
							</view>
							<view class="table__item"  style="width: 206rpx;">
								共{{item.num}}.{{item.canku.name}}【{{item.num}}】
							</view>
							<view class="table__item" style="width: 66rpx;">
								{{item.flag}}
							</view>
						</view>
					</scroll-view>
				</view> -->
			</view>
		</view>
		<u-picker :show="show" :columns="columns" keyName='name' @cancel='show=false' @close='show=false'
			:closeOnClickOverlay='true' @confirm='confirm' :defaultIndex='[0]' :loading='loading'></u-picker>
	</view>
</template>

<script>
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	import datagl from '@/api/_datagl.js'
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd
		},
		data() {
			return {
				show: false,
				listtab: [{
						name: '所有仓库',
						id: ''
					},
					{
						name: '所有大类',
						id: ''
					},
					{
						name: '所有小类',
						id: ''
					},
				],
				list: [],
				curtab: null,
				columns: [],
				loading: false
			};
		},
		methods: {
			confirm(e){
				this.listtab[this.curtab]=e.value[0]
				this.show=false
				this.$forceUpdate()
				this.getlist()
				console.log(this.listtab)
			},
			async getlist() {
				let canku_id = this.listtab[0].id
				let cate_id = this.listtab[1].id
				let subcate_id = this.listtab[2].id
				let res = await datagl.getKuCun({
					canku_id,
					cate_id,
					subcate_id
				})
				if (res.data.code == 1) {
					this.list = res.data.data
				}
			},
			clicktab(index) {
				this.curtab=index
				this.loading = true
				this.show = true
				
				if (index == 0) {
					this.columns = [
						[{name:'所有仓库',id:''}]
					]
					this.getcangkun()
				}
				if (index == 1) {
					this.columns = [
						[{name:'所有大类',id:''}]
					]
					this.getCate()
				}
				if (index == 2) {
					this.columns = [
						[{name:'所有小类',id:''}]
					]
					this.getSubCate()
				}
			},
			async getcangkun() {
				let res = await datagl.getCankuList()
				if (res.data.code == 1) {
					this.columns = [
						[...this.columns[0], ...res.data.data]
					]
					this.loading = false
				}
			},
			async getCate() {
				let res = await datagl.getCateList()
				if (res.data.code == 1) {
					this.columns = [
						[...this.columns[0], ...res.data.data]
					]
					this.loading = false
				}
			},
			async getSubCate() {
				if (!this.listtab[1].id) {
					this.loading = false
					return
				}
				let res = await datagl.getSubCateList({
					cate_id: this.listtab[1].id
				})
				if (res.data.code == 1) {
					this.columns = [
						[...this.columns[0], ...res.data.data]
					]
					this.loading = false
				}
			}
		},
		onLoad() {
			this.getlist()
		}
	}
</script>

<style lang="scss">
	.con {
		padding: 30rpx;

		.tab {
			width: 176rpx;
			height: 55rpx;
			background: #F6F7F9;
			border-radius: 5rpx 5rpx 5rpx 5rpx;
			border: 1rpx solid #E8E9EB;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #010101;
			line-height: 28rpx;
		}
	}

	.table {
		margin-top: 24rpx;
		// border-left: 1rpx solid #E8E9EB;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 22rpx;
		color: #1E1E1E;
		line-height: 40rpx;
		text-align: center;

		&__head {
			display: flex;
			align-items: center;

			.item {
				background-color: #F6F7F9;
				border-top: 1rpx solid #E8E9EB;

			}
		}

		&__item {
			padding: 20rpx 18rpx;
			display: table-cell;
		}

		&__body {
			max-height: calc(100vh - var(--status-bar-height) - 44px - 1px - 57rpx - 30rpx - 30rpx - 24rpx - 82rpx);
		}
	}

	.br {
		border-right: 1rpx solid #E8E9EB;
	}

	.bb {
		border-bottom: 1rpx solid #E8E9EB;
	}

	.bl {
		border-left: 1rpx solid #E8E9EB;
	}
</style>